---
title: Accordion
description: Usage instructions for the Accordion component
---

<PageDescription>

The `<Accordion>` and `<AccordionItem>` components are used together to display
a list of content sections that can be toggled open by clicking the respective
title of each section.

</PageDescription>

## Example

<Accordion>
<AccordionItem title="Title 1">

In ac nisi ut mauris venenatis blandit a et ante. Mauris eu congue velit, eget
dictum diam. Etiam sed turpis quis ligula interdum lobortis eu et libero.
Praesent nec eros sit amet elit tempor egestas cursus non nulla. Vestibulum
dictum luctus lorem in rhoncus.

Nullam vestibulum blandit libero, ac tempus felis tristique id. Aliquam rhoncus
vestibulum dui eu dictum. Morbi congue purus eu libero sodales, nec sollicitudin
ligula tempor.

- list item
- list item
- list item

</AccordionItem>
  <AccordionItem title="Title 2">Content Section</AccordionItem>
  <AccordionItem title="Title 3">Content Section</AccordionItem>
</Accordion>

## Code

```mdx path=components/Accordion/Accordion.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/Accordion
<Accordion>
  <AccordionItem title="Title 1">Content Section</AccordionItem>
  <AccordionItem title="Title 2">Content Section</AccordionItem>
  <AccordionItem title="Title 3">Content Section</AccordionItem>
</Accordion>
```

### Props

<Title>Accordion</Title>

| property  | propType | required | default | description                                                       |
| --------- | -------- | -------- | ------- | ----------------------------------------------------------------- |
| children  | node     |          |         | Pass in the children that will be rendered within the Accordion   |
| className | string   |          |         | Specify an optional className to be applied to the container node |

<Title>AccordionItem</Title>

| property        | propType | required | default                        | description                                                                         |
| --------------- | -------- | -------- | ------------------------------ | ----------------------------------------------------------------------------------- |
| title           | node     |          | 'title'                        | The accordion title                                                                 |
| renderExpando   | func     |          | props => <button {...props} /> | The callback function to render the expando button. Can be a React component class. |
| iconDescription | string   |          | 'Expand/Collapse'              | The description of the expando icon                                                 |
| open            | bool     |          | false                          | `true` to open the expando                                                          |
| onClick         | func     |          | () => {}                       | The handler of the massaged `click` event.                                          |
| onHeadingClick  | func     |          | () => {}                       | The handler of the massaged `click` event on the heading.                           |
| children        | node     |          |                                | Provide the contents of your AccordionItem                                          |
| className       | string   |          |                                | Specify an optional className to be applied to the container node                   |
